<script setup>
import {
  Guide,
  List,
  Phone,
  QuestionFilled,
  Stamp
} from '@element-plus/icons-vue'
</script>
<template>
  <div>
    <el-carousel
      :interval="4000"
      type="card"
      style="height: 100%; max-width: 1280px; margin: 0 auto"
    >
      <!--<img
          :src="ProUserObj.picture"
          style="object-fit: cover; width: 100%; height: 100%; margin: 40px"
      />-->
      <el-carousel-item class="puman-carousel"
        ><el-image
          style="object-fit: cover; width: 100%; height: 100%; margin: 40px"
        />
      </el-carousel-item>
      <el-carousel-item>
        <el-image
          src="./public/def.jpg"
          style="object-fit: cover; width: 100%; height: 100%; margin: 40px"
        />
      </el-carousel-item>
      <el-carousel-item>
        <el-image
          src="./public/def.jpg"
          style="object-fit: cover; width: 100%; height: 100%; margin: 40px"
        />
      </el-carousel-item>
    </el-carousel>
    <el-descriptions title="项目信息" border class="description">
      <el-descriptions-item label="项目名称" align="center" width="250px"
        ><template #label>
          <div class="cell-item">
            <el-icon><Document /></el-icon>
            项目名称
          </div></template
        ><span style="margin-left: 10px; font-size: 12px; color: #888888"
          >此为您自己的项目</span
        >
      </el-descriptions-item>
      <el-descriptions-item label="项目类别" align="center" width="160px">
        <template #label>
          <div class="cell-item">
            <el-icon><DocumentRemove /></el-icon>
            项目类别
          </div></template
        >
        <el-tag type="warning" size="large"></el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="负责人" align="center" width="180px"
        ><template #label>
          <div class="cell-item">
            <el-icon><Avatar /></el-icon>
            负责人
          </div></template
        ><el-tag type="warning" size="large"></el-tag>
        <el-tag type="info" size="large">该用户暂无真名</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" align="center"
        ><template #label>
          <div class="cell-item">
            <el-icon><Clock /></el-icon>
            创建时间
          </div></template
        ></el-descriptions-item
      >
      <el-descriptions-item label="项目最大人数" align="center"
        ><template #label>
          <div class="cell-item">
            <el-icon><UserFilled /></el-icon>
            项目最大人数
          </div></template
        ></el-descriptions-item
      >
      <el-descriptions-item label="项目状态" align="center"
        ><template #label>
          <div class="cell-item">
            <el-icon><QuestionFilled /></el-icon>

            项目状态
          </div></template
        ><el-tag type="warning" size="large" style="margin-right: 8px"></el-tag>
        <el-button type="primary" style="margin-left: 0px"
          >加入项目</el-button
        ></el-descriptions-item
      >
      <el-descriptions-item label="负责人邮箱" align="center"
        ><template #label>
          <div class="cell-item">
            <el-icon><Guide /></el-icon>
            负责人邮箱
          </div></template
        ></el-descriptions-item
      >
      <el-descriptions-item label="负责人电话" align="center"
        ><template #label>
          <div class="cell-item">
            <el-icon><Phone /></el-icon>
            负责人电话
          </div></template
        ></el-descriptions-item
      >
      <el-descriptions-item label="负责人QQ" align="center"
        ><template #label>
          <div class="cell-item">
            <el-icon><Stamp /></el-icon>
            负责人QQ
          </div></template
        ></el-descriptions-item
      >
      <!--      <el-descriptions-item label="项目描述" align="center" span="3"
        ><template #label>
          <div class="cell-item">
            <el-icon><List /></el-icon>
            项目描述
          </div></template
        >{{ ProUserObj.projectDescription }}</el-descriptions-item
      >-->
    </el-descriptions>
    <el-row
      justify="center"
      style="top: 15px; max-width: 1280px; margin: 0 auto"
    >
      <el-col span="8">
        <el-icon><List /></el-icon><strong> 项目介绍 </strong><br />
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.description {
  margin: 0px auto;
  max-width: 1280px;
}
</style>
